@import '../../style/themes';
@import '../../style/mixins';

$progress: x-progress;

@mixin progressStatus($status, $bg, $color: $bg) {
  .#{$progress}-status-#{$status} {
    .#{$progress}_rail {
      background: $progress-rail-color;
    }
    .#{$progress}_fill {
      background: $bg;
    }
    .#{$progress}_text {
      color: $color;
    }
  }
}

@include progressStatus('default', $primary-color, $text-color);
@include progressStatus('success', $success-color);
@include progressStatus('warning', $warning-color);
@include progressStatus('error', $error-color);

.#{$progress} {
  @include reset-component();
  width: 100%;
  display: flex;
  align-items: center;

  &_text {
    min-width: 2em;
    height: unset;
    margin-left: $margin-xs;
    line-height: inherit;
    text-align: left;
    white-space: nowrap;
  }

  &_rail {
    flex: 1;
  }
  
  &_fill {
    box-sizing: border-box;
    text-align: right;
    transition: background .4s, width .4s;
    .#{$progress}_text {
      margin: 0 $margin-xs;
      color: $text-color-inverse;
    }
  }

}